import React from 'react';
import { inject, observer} from 'mobx-react';
import { WeaDialog,WeaAlertPage, WeaLocaleProvider } from 'ecCom';
import { Card,Button } from 'antd';
import LogItem from './LogItem';
import '../../style/formModifyLog.less';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class LogContent extends React.Component {
    constructor(props){
        super(props);
    }
    getFooter(){
        let btns = [];
        const { wfFormModifyLogStore } = this.props;
        const { isAll,loading } = wfFormModifyLogStore;
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pyust7@shownode`} type='primary' disabled={loading} onClick={()=>{wfFormModifyLogStore.switchLogRange(!isAll)}}>{isAll ? getLabel('386171',"显示当前节点") : getLabel('386172',"显示全部节点")}</Button>);
        return btns;
    }
    render(){
        const { wfFormModifyLogStore } = this.props;
        const { belForm } = this.props;
        const { loading,nodeLogs,showDialog } = wfFormModifyLogStore;
        let height = this.props.height ? this.props.height : "100%";
        let dialogProps = belForm ? {draggable:false, mask:false, parentClassName:"wf-modifylog-outerdialog"} : {};
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@vo4057`}
                title={getLabel('21621',"表单修改日志")}
                icon="icon-coms-workflow"
                iconBgcolor='#0079DE'
                visible={showDialog}
                loading={loading}
                onCancel={()=>{wfFormModifyLogStore.controlDialog(false);}}
                buttons={this.getFooter()}
                style={{width:"1000px", height:"560px"}}
                {...dialogProps}
            >
                <div className="wf-modifylog" style={{height:height, overflowY:"auto"}}>
                    {
                        nodeLogs && nodeLogs.length > 0 ? <div className="wf-modifylog-content">
                        {
                            nodeLogs.map((v,nindex)=>{
                                return <Card ecId={`${this && this.props && this.props.ecId || ''}_Card@tn5dsq@${nindex}`} title={v.length>0 ? v[0].nodename : ""} style={{marginTop:`${nindex==0 ? 0 : 32}px`}}>
                                        {
                                            v.map((log,index)=>{
                                                return <LogItem ecId={`${this && this.props && this.props.ecId || ''}_LogItem@jqtjhw@${index}`} data={mobx.toJS(log)} index={index} />
                                            })
                                        }
                                </Card>
                            })
                        } 
                        </div> : <div style={{height:"100%"}}>
                            {
                                !loading && <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@gs6de6`} icon="icon-coms-blank">
                                    <div>{getLabel('83553',"暂无数据")}</div>
                                </WeaAlertPage>
                            }
                        </div>
                    }
                </div>
            </WeaDialog>
        )
    }
}